<template>
  <div class="edit app-container">
    <el-dialog :title="title" :visible.sync="show" width="900px">

      <div class="content" v-loading="loading">
        <el-form ref="edit-form" :model="form" :rules="formRules" label-width="120px" label-position="right">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="门店名称:" prop="storeName">
                <el-input v-model="form.storeName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录名:" prop="storeLoginName">
                <el-input v-model="form.storeLoginName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="门店类型:" prop="storeType">
                <el-select v-model="form.storeType" placeholder="请选择门店类型" style="width: 300px;">
                  <el-option v-for="item in dict.type.store_type" :key="item.value" :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="门店地址:" prop="storeAddress">
                <el-input v-model="form.storeAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系电话:" prop="storePhone">
                <el-input v-model="form.storePhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人:" prop="storePerson">
                <el-input v-model="form.storePerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="营业时间:" prop="time1">
                <el-date-picker v-model="form.time1" style="width: 300px;" type="daterange" value-format="yyyy-MM-dd"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="核销时效:">
                <el-date-picker v-model="form.time2" value-format="yyyy-MM-dd" style="width: 300px;" type="daterange"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门店LOGO:">
                <image-upload :isShowTip="false" v-model="form.logo" :limit="1"></image-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="门店介绍:">
                <el-input type="textarea" v-model="form.storeIntroduction"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="轮播图:">
                <image-upload :isShowTip="false" v-model="form.banner" :limit="99"></image-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="微信收款账号:" prop="wxAccount">
                <el-input v-model="form.wxAccount"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" v-if="!loading">
        <el-button type="primary" @click="onSubmit" :loading="btnLoading">{{title=='添加'?'立即创建':'立即修改'}}</el-button>
        <el-button @click="cnacel" :disabled="btnLoading">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import QuillEdit from "@/components/Editor";
  import {
    storeAdd,
    storeEdit,
    storeList
  } from "@/api/store/content"
  export default {
    name: 'ContentEdit',
    dicts: ['store_type'],
    components: {
      QuillEdit
    },
    data() {
      return {
        form: {},
        formRules: {
          storeName: {
            required: true,
            message: '请输入门店名称',
            trigger: 'blur'
          },
          storeLoginName: {
            required: true,
            message: '请输入登录名',
            trigger: 'blur'
          },
          storeType: {
            required: true,
            message: '请选择门店类型',
            trigger: 'change'
          },
          storeAddress: {
            required: true,
            message: '请输入门店地址',
            trigger: 'blur'
          },
          storePhone: {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          time1: {
            required: true,
            message: '请选择营销时间',
            trigger: 'blur'
          },
          wxAccount: {
            required: true,
            message: '请输入微信收款账号',
            trigger: 'blur'
          },
        },
        show: false,
        title: '',
        btnLoading: false,
        loading: false
      }
    },
    created() {
      this.rest()
    },
    methods: {
      init(str,storeId) {
        this.show = true
        this.rest()
        if (str == 'add') {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.loading = true
          storeList({storeId}).then(res=>{
            this.form = res.rows[0]
            this.form.time1 = [res.rows[0].businessTimeStart,res.rows[0].businessTimeEnd]
            this.form.time2 = [res.rows[0].writeTimeStart,res.rows[0].writeTimeEnd]
            this.loading = false
          })
        }
      },
      rest() {
        this.form = {
          storeName: '',
          storeLoginName: '',
          storeType: '',
          storePhone: '',
          storePerson: '',
          storeAddress: '',
          time1: [],
          time2: [],
          logo: '',
          storeIntroduction: '',
          wxAccount: '',
          banner: ''
        }
        // this.form = {
        //   "storeName": "test门店",
        //   "storeLoginName": "万磁王",
        //   "storeType": "餐饮",
        //   "storePhone": "18733842561",
        //   "storePerson": "孙刘森",
        //   "storeAddress": "二仙桥",
        //   "time1": [
        //     "2022-08-16",
        //     "2022-09-23"
        //   ],
        //   "time2": [
        //     "2022-08-10",
        //     "2022-09-14"
        //   ],
        //   "logo": "/profile/upload/2022/08/01/7_20220801105014A001.jpeg",
        //   "storeIntroduction": "真的可以看",
        //   "wxAccount": "sunliusen",
        //   "banner": "/profile/upload/2022/08/01/3_20220801105022A002.jpeg,/profile/upload/2022/08/01/5_20220801105022A003.jpeg,/profile/upload/2022/08/01/4_20220801105022A004.jpeg,/profile/upload/2022/08/01/2_20220801105022A005.jpeg"
        // }
        this.resetForm('edit-form')
      },
      onSubmit() {
        this.$refs['edit-form'].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            let form = {
              ...this.form
            }
            form.businessTimeStart = form.time1[0]
            form.businessTimeEnd = form.time1[1]
            form.writeTimeStart = form.time2[0]
            form.writeTimeEnd = form.time2[1]
            delete form.time1
            delete form.time2
            if(form.storeId){
              storeEdit(form).then(res => {
                this.btnLoading = false
                this.$emit('success')
                this.$message.success('编辑成功')
                this.cnacel()
              })
            }else{
              storeAdd(form).then(res => {
                this.btnLoading = false
                this.$emit('success')
                this.$message.success('新增成功')
                this.cnacel()
              })
            }

          }
        })
      },
      cnacel() {
        this.show = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .edit {}
</style>
